<template>
  <div class="ant_img_b">
    <template v-for="(item,index) in antImgesUl">
      <div class="ant_img_box" :key="index" :style="'width:'+width+'px;height:'+height+'px'">
        <img class="ant_img" :src="item" alt="" >
        <div class="ant_img_test_box" :style="'line-height: '+height+'px;'" @click="bigImage(index)">
          <span class="ant_img_test">
            <a-icon type="eye" class="ant_img_eye" two-tone-color="#ffffff" />
            <span class="ant_img_see">预览</span>
          </span>
        </div>
      </div>
    </template>
    <a-modal
      :title="title"
      :width="1200"
      :visible="visible"
      cancel-text="关闭"
      @ok="submit"
      @cancel="closeModal"
    >
      <div class="modal_box">
        <img class="modal_img" :class="'modal_img_'+ rotateVal" :src="antImges" alt="">
        <div class="modal_btn">
          <a-button type="primary" @click="choose(1)"> 上一张 </a-button>
          <a-button type="primary" @click="choose(2)"> 下一张 </a-button>
          <a-button type="primary" @click="rotate()"> 旋转 </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { Slime } from '@/mixins/slime';
export default {
  name: 'antImges',
  props:['antImgesUl','width','height'],
  data() {
    return {
      title: '图片详情',
      visible:false,
      imgChoose:0,
      antImges:'',
      rotateVal:1
    };
  },
  mixins: [Slime],
  methods: {
    // 提交
    submit() {
      this.closeModal()
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.$emit('closeModal');
    },
    //旋转
    rotate(){
      if(this.rotateVal < 4){
        this.rotateVal ++
      }else{
        this.rotateVal = 1
      }
    },
    //上一张/下一张
    choose(val){
      let imgChoose = this.imgChoose
      if(val == 1){ //上一张
        if(imgChoose > 0){
          imgChoose --
        }
      }else if(val == 2){ //下一张
        if(imgChoose < this.antImgesUl.length - 1){
          imgChoose ++
        }
      }
      this.bigImage(imgChoose)
    },
    //查看图片
    bigImage(val){
      this.imgChoose = val
      this.visible = true;
      this.antImges = this.antImgesUl[val]
    },
  },
};
</script>

<style scoped>
.ant_img_b{
  display: inline-block;
  float: left;
}
.ant_img_box{
  position: relative;
  display: inline-block;
  width: 200px;
  height: 140px;
  background-color: #cdcdcd;
  margin-right: 5px;
  margin-bottom: 5px;
}
.ant_img_test_box{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
}
.ant_img_test_box:hover{
  opacity: 1;
  background-color: rgba(0,0,0,0.6);
}
.ant_img_test{
  position: relative;
  text-align: center;
  color: #fff;
  margin: auto;
  line-height: 140px;
}
.ant_img_eye{
  position: absolute;
  top: 2px;
  left: -20px;
}
.ant_img_see{
  text-align: center;
  color: #fff;
}
.ant_img{
  width: 100%;
  height: 100%;
}
.modal_box{
  text-align: center;
  position: relative;
}
.modal_btn{
  position: absolute;
  bottom: -75px;
  left: 0px;
}
.modal_img{
  margin: auto;
}
.modal_img_1{
  max-width: 1000px;
}
.modal_img_2{
  max-width: 1000px;
  max-height: 1000px;
  transform: rotateZ(90deg)
}
.modal_img_3{
  max-width: 1000px;
  transform: rotateZ(180deg)
}
.modal_img_4{
  max-width: 1000px;
  max-height: 1000px;
  transform: rotateZ(270deg)
}
</style>